<template>
    <div style="width: 600px;margin: auto;">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="userInfo" :rules="rules" label-width="auto"
            status-icon>
            <el-form-item label="用户名：" prop="loginName">
                <el-input v-model="userInfo.loginName" />
            </el-form-item>
            <el-form-item label="性别：" prop="userGender">
                <el-radio-group v-model="userInfo.userGender">
                    <el-radio :value="true">男</el-radio>
                    <el-radio :value="false">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所在地址：" prop="address">
                <!-- 使用树形列表显示 -->
                <!-- <el-tree style="max-width: 600px" :data="countyInfoList" :props="defaultProps" /> -->
                <!-- <el-tree-select v-model="userInfo.address" :data="countyInfoList" :props="defaultProps":render-after-expand="false" /> -->
                <!-- <el-cascader v-model="userInfo.address" :options="countyInfoList" :props="defaultProps" clearable
                    style="width: 100%;" /> -->
                <el-cascader size="large" :options="options" v-model="userInfo.address" @change="handleChange"
                    style="width: 100%;" />
            </el-form-item>
            <el-form-item label="详细地址：" prop="fullAddress">
                <el-input v-model="userInfo.fullAddress" />
            </el-form-item>
            <el-form-item>
                <el-button style="margin: auto;" type="primary" @click="updateUserInfo()">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { regionData, codeToText } from 'element-china-area-data'


import http from '@/http'
const router = useRouter()
const route = useRoute()

//const countyInfoList = ref([])
/* const defaultProps = {
    children: 'children',
    label: 'name',
    value: 'name',
    pinyin: 'pinyin',
    firstPinyin: 'firstPinyin'
} */
/* const getCountyInfoList = () => {
    http.get("/api/User/GetTree").then(res => {
        countyInfoList.value = res.data;
    })
} */

const getUserInfo = () => {
    http.get("/api/User/GetUserInfoByUserId?userId=" + route.query.userId).then(res => {
        userInfo.userId = res.data.userId;
        userInfo.userGender = res.data.userGender;
        userInfo.loginName = res.data.loginName;
        userInfo.userProvince = res.data.userProvince;
        userInfo.userCity = res.data.userCity;
        userInfo.userArea = res.data.userArea;
        userInfo.fullAddress = res.data.fullAddress;
        userInfo.passWord = res.data.passWord;
        userInfo.createPerson = res.data.createPerson;
        userInfo.createDate = res.data.createDate;
        userInfo.revisePerson = res.data.revisePerson;
        userInfo.reviseDate = res.data.reviseDate;
        userInfo.isDelete = res.data.isDelete;
        userInfo.departmentId = res.data.departmentId;
        userInfo.address.push(userInfo.userProvince.toString());
        userInfo.address.push(userInfo.userCity.toString());
        userInfo.address.push(userInfo.userArea.toString());
    })
}

const userInfo = reactive({
    userId: 0,
    userGender: true,
    loginName: "",
    passWord: "",
    userProvince: "",
    userCity: "",
    userArea: "",
    address: [] as Array<string>,
    fullAddress: "",
    createPerson: "",
    createDate: "",
    revisePerson: "",
    reviseDate: "",
    isDelete: false,
    departmentId: ""
})

const ruleFormRef = ref()
const rules = reactive({
    loginName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    passWord: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    address: [
        {
            required: true,
            message: '请选择用户地址',
            trigger: 'blur',
        },
    ],
    fullAddress: [
        { required: true, message: '请填写详细地址', trigger: 'blur' },
    ],
})

const updateUserInfo = () => {
    // 用户所在省
    userInfo.userProvince = userInfo.address[0];
    // 用户所在市
    userInfo.userCity = userInfo.address[1];
    // 用户所在县
    userInfo.userArea = userInfo.address[2];
    http.put("/api/User/UpdateUserInfo", userInfo).then(res => {
        if (res.data > 0) {
            ElMessage({
                type: 'success',
                message: '修改成功',
                duration: 1000
            });
            router.push('/userListView')
        }
        else if (res.data == -1) {
            ElMessage({
                type: 'error',
                message: '用户名重复，请重新输入',
                duration: 1000
            })
        }
        else {
            ElMessage({
                type: 'error',
                message: '修改失败',
                duration: 1000
            })
        }
    })
}

// 省市县三级联动（前台）

const options = ref(regionData)

const handleChange = () => {
    if (
        userInfo.address[0] != null &&
        userInfo.address[1] != null &&
        userInfo.address[2] != null
    ) {
        const str =
            codeToText[userInfo.address[0]] +
            '/' +
            codeToText[userInfo.address[1]] +
            '/' +
            codeToText[userInfo.address[2]]
    }
}


onMounted(() => {
    getUserInfo();
    //getCountyInfoList();
})
</script>

<style scoped></style>